import { useState } from 'react';
import { View, Text, StyleSheet, Image, TextInput, Pressable, Dimensions } from 'react-native';


import logo from "../assets/appicon.png";
// import footerLogo from "../assets/cobot.png"
const width = Dimensions.get('window').width;

const Login = ({ navigation }) => {

    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const handleLogin = () => {
        navigation.navigate("Home");
    };
    return (
        <View style={styles.container}>
            <Image style={styles.logo} source={logo} resizeMode="contain"></Image>
            <View style={styles.inpCon}>
                <TextInput
                    style={styles.input}
                    placeholder="用户名"
                    value={username}
                    onChangeText={setUsername}
                />
                <TextInput
                    style={styles.input}
                    placeholder="密码"
                    secureTextEntry
                    value={password}
                    onChangeText={setPassword}
                />
                <Pressable style={styles.btn} onPress={handleLogin}>
                    <Text style={styles.btnTxt}>登录</Text>
                </Pressable>
                <Pressable style={styles.btnout} onPress={handleLogin}>
                    <Text style={styles.btnoutTxt}>退出</Text>
                </Pressable>
            </View>
            {/* <View style={styles.titleWrap}>
                <Image style={styles.footerLogo} source={footerLogo} resizeMode='contain'></Image>
                <View>
                    <Text style={styles.titleTxt}>武汉库柏特科技有限公司</Text>
                </View>
            </View> */}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
    logo: {
        width: 40,
        height: 40
    },
    inpCon: {
        width: width,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
        // borderWidth: 1,
    },
    input: {
        height: 40,
        width: '80%',
        borderColor: '#ccc',
        borderWidth: 1,
        marginBottom: 10,
        paddingLeft: 10,
    },
    btn: {
        width: '80%',
        // borderWidth: 1,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
        backgroundColor: '#4867F4',
        marginBottom: 10
    },
    btnout: {
        width: '80%',
        // borderWidth: 1,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
        backgroundColor: '#fff',
        marginBottom: 10
    },
    btnTxt: {
        color: '#fff',
        fontSize: 16,
    },
    btnoutTxt: {
        color: '#000',
        fontSize: 16,
    },
    titleWrap: {
        marginTop: 10,
        borderWidth: 1,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'center'
    },
    footerLogo: {
        widthL: 50,
        height: 10,
    },
    titleTxt: {
        fontSize: 12,
        fontWeight: '100',
        color: '#000'
    },
});

export default Login;